<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Atrium - One Page Responsive HTML Template - Documentation</title>
	<link rel="stylesheet" href="install.css" type="text/css" />
</head>
	
	<body>
   
		<div class="wrapper">
        <h1 id="top-title" style="text-align: center">Atrium - One Page Responsive HTML Template - Documentation</h1>
		<p style="text-align: center">by MatchThemes - <a href="http://www.matchthemes.com" title="MatchThemes">www.matchthemes.com</a></p>
 
<p class="p-margin">Hi there,</p>
<p>First of all, thank you for purchasing the Atrium - One Page Responsive HTML Template. Please take the time and read the instructions below. If you have any future question/problems send us an email at: <a href="mailto:support@matchthemes.com">support@matchthemes.com</a></p>

<h1>Table of Contents</h1>
<ol>
<li>1. <a href="#p1">Getting Started</a></li>
<ul>
<li>1.1<a href="#p11"> General Info </a></li>
<li>1.2<a href="#p12"> Big Image and Parallax Effect</a></li>
<li>1.3<a href="#p13"> About &amp; Team Members Section</a></li>
<li>1.4 <a href="#p14"> Portfolio Section</a></li>
<li>1.5 <a href="#p15"> Blog Section</a></li>
<li>1.6<a href="#p16"> Change Contact Form Email</a></li>
</ul>
<li>2. <a href="#p2">Files Used</a></li>
<ul>
<li>2.1 <a href="#p21">CSS Files</a></li>
<li>2.2 <a href="#p22">Javascript Files</a></li>
</ul>
</ol>

<h1 id="p1">1. Getting Started</h1>
<h2 id="p11">1.1 General Info</h2>
<p>In order to start modifing the template go to <strong>atrium-html</strong> folder in the download package. The general css file is styles.css file. To change colors for individual elements you have to go to <strong>css/colors.css</strong> file.</p>
<p><strong>Note:</strong> You'll have the possibility to use one of the preset color templates found in <strong>preset-colors</strong> folder.</p>

<h2 id="p12">1.2 Big Image and Parallax Effect</h2>
<p>In order to change the top big image go to <strong>css/colors.css</strong> line 32.</p>
<p>Also in this file (colors.css) you can change the background images for sub-sections (team members line 97, testimonials 113, price table line 122)</p>

<p>The parallax effect is initialized in <strong>js/init.js</strong> file line 31.</p>

<h2 id="p13">1.3 About Page Setup</h2>
<p>Open index.html and go to <strong>line 79</strong>. There is the beginning of About section. Change the text, add / edit team members or add / edit skills.</p>
<p>For team member image you only have to replace the default one with your own, normal image. Make sure is at least 210x210 pixels.</p>
<p>The team members flexslider properties are at line 115 in the <strong>js/init.js</strong> file.</p>


<h2 id="p14">1.4 Portfolio Section</h2>
<p>Open index.html and go to <strong>line 315</strong>. There is the beginning of Porfolio section.</p>
<p><strong>a. Add new item:</strong> you have to copy and paste the <strong>portfolio-item</strong> li tag.</p>
<p><strong>b.Change filter category:</strong> you'll have to add a corresponding class for the item with the ones found in the <strong>portfolio-filter</strong> list.An item can have more than one category. Check the image below.</p>
<p><img src="images/filter-categ.jpg" alt="" width="500" height="450" /></p>
<p><strong>c.jQuery script:</strong> open <strong>js/init.js</strong> and go to <strong>line 93</strong>.</p>

<h2 id="p15">1.5 Blog Section</h2>
<p>Open index.html and go to <strong>line 821</strong>. There is the beginning of Blog section. Add / Edit / Delete articles.</p>
<p><strong>!Important:</strong> make sure the image for an article is at least 400x300 pixels.</p>
<p>The template for a single article is: <strong>blog-single-post.html</strong>.</p>

<h2 id="p16">1.6 Change Subscribe Form Email</h2>
<p>You have to edit the <strong>include/contact-process.php</strong> and change the $recipient variable value with your own email address.</p>
<p><img src="images/contact-email.jpg" alt="" width="300" height="100" /></p>


<h1 id="p2">2. Files Used</h1>
<h2 id="p21">2.1 CSS Files</h2>
<p>All CSS files, with the exception of the main CSS file (style.css) can be found in the theme's <strong>/css/</strong> folder.</p>
<p>style.css - Main stylesheet and determines the majority of the templates styling.</p>
<p>bootstrap.css &amp; bootstrap-responsive.css - The styles for the <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap</a> framework.</p>

<h2 id="p22">2.2 Javascript Files</h2>
<p><a href="http://isotope.metafizzy.co/" target="_blank">Portfolio Filter</a> - jQuery Isotope.</p>
<p><a href="http://www.woothemes.com/flexslider/" target="_blank">FlexSlider</a> - item porfolio slideshow.</p>

</div> <!--end wrapper-->    